<template>
	<div>
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor">引流送积分</div>
			</div>
		</header>
		<div class="main">
			<!--支付方式-->
			
			
			<!--输入框-->
			<div class="main_main marginAuto">
				<div class="drainage _width clearfix">
					<span class="pull-left">引流金额</span>
					<input type="number" class="pull-right" @change="drainages" value="" placeholder="请输入金额" v-model="drainage"/>
				</div>
				<div class="account clearfix">
					<span class="pull-left">到账冻积分数</span>
					<span class="pull-right" v-text="Credits" style="margin-right: 10px;" ></span>
				</div>
				<div class="proof_header">
					<span>上传凭证</span>
				</div>
				<div class="proof_main _width">
					<i class="iconfont">&#xe61a;</i>
					<div class="proof_img" id="preview">
						<img :src="fileImg" alt="凭证"/>
					</div>
					<input type="file" name="photo" id="file" @change="onUpload" />
				</div>
				<!--=底部=-->
				<div class="footer_button_deal _width">
					<div class="deal">
						<span><strong :class="{activestrong:active}" @click="select"></strong></span>
						<em>我同意<i @click="agreement">《引流送积分协议》</i></em>
					</div>
					<div class="footer_button button _width baiColor" @click="enter">
						<span>提交</span>
					</div>
				</div>
			</div>
			
		</div>
		<!--弹窗-->
		<div class="keepOut" :class="{activeblock:agreementshow}"></div>
		<div class="agreementblock" :class="{activeblock:agreementshow}">
			<div class="agreementblock_header">
				<span>《积分引流协议》</span>
			</div>
			<div class="agreementblock_main" >
				<p v-for="agreement in agreements" v-text="agreement.text"></p>
			</div>
			<div class="agreementblock_button button baiColor" @click="quit">
				<span>取消</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				imgURL:this.imgURL,
				drainage:"",	//引流金额
				Credits:"0.00",	//到账冻积分数
           		fileImg:"",//凭证
           		active:true,	//引流送积分协议
           		agreementshow:false,	//引流协议显隐
           		agreements:[		//引流协议内容
           		{
           			text:"本协议由您与“天之牧”商城（以下简称“天之牧”）的经营者共同缔结，请您仔细阅读本协议，您点击“同意”按钮后，即视为同意并严格遵守本协议，本协议将对您产生法律约束力。"
           		},
           		{
           			text:"在使用“天之牧”商城平台服务之前，您应当认真阅读并遵守《“天之牧”积分引流服务协议》（以下简称“本协议”），请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、争议解决和法律适用条款。"
           		},
           		{
           			text:"当您按照页面提示填写信息、阅读并同意本协议，即表示您已充分阅读、理解并接受本协议的全部内容，并与“天之牧”商城平台达成协议。您承诺接受并遵守本协议的约定，届时您不应以未阅读本协议的内容或者未获得“天之牧”商城对您问询的解答等理由，主张本协议无效，或要求撤销本协议。"
           		},
           		{
           			text:"为使全体商户及企业充分享受到天之牧优质服务，本商城现推出积分引流服务，针对商户线下实体的真实经营行为给予奖励。"
           		},{
           			text:"积分引流活动的方式方法、运行流程、款项结算等遵循天之牧系统各项章程、协议、规定的具体规定或惯例操作运行。"
           		},
           		{
           			text:"1、您经营账款，线上交易按照双方约定结算，线下交易，您自行收讫。2、经营运行涉及的相关税费，由双方各自自行承担。"
           		},
           		{
           			text:"3、您作为天之牧的会员，天之牧对您销售金额 16 ％的现金作为引流技术服务费实行代收，并赠送您116%的返还积分（冻积分）。"
           		},{
           			text:"1、“天之牧”商城是在政府部门依法许可或备案的本站经营主体。"
           		},
           		{
           			text:"2、“天之牧”商城尊重您的合法权利，本协议及本站上发布的各类规则、声明等其他内容，均是为了更好的、更加便利的为您提供服务。"
           		},
           		{
           			text:"3、广大商户及企业在享受积分引流服务的便利的同时，应严格遵守国家、地区、行业相关法律、法规、及商城系统相关约定的规章制度，您承诺享受积分引流活动过程中，如出现违规行为（如虚假物流、恶意购买、虚假分享、虚假交易等）本商城有权取消您的一切权益，对此本商城不承担任何相关法律责任。"
           		},
           		{
           			text:"本商城对商户交易的真实性不向任何第三方保证，如商户发生虚假交易、高风险交易等侵犯第三方利益的行为，产生的全部责任由商户独立、全责承担，与本商城无关。"
           		},
           		{
           			text:"1、本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国大陆地区法律，如无相关法律规定的，则应参照通用国际商业惯例和/或行业惯例。 如发生本协议部分内容与国家现行法律、法规冲突的视为无效，以国家现行法律、法规为准，不影响本合同内其他内容的法律效力。"
           		},
           		{
           			text:"2、凡因本协议产生的所有争议应由天之牧的经营者与您协商解决，协商不成的，您与天之牧平台的经营者均同意以被告住所地人民法院为第一审管辖法院。"
           		},
           		{
           			text:"3、本协议以其中文版本为最终生效版本。"
           		},
           		{
           			text:"4、、您点击本协议中的“同意”按钮即视为您完全接受本协议，在点击之前请您再次确认已知悉并完全理解本协议的全部内容。"
           		},
           		]
			}
		},
		
		methods:{
			//获取到账冻积分数
			drainages(){
				let _this = this;
				var info = window.localStorage.data;
				var drainage = this.drainage; //引流金额
				if(drainage<16){
					alert("引流金额不得少于16元")
				}else{
					this.$axios({
					   url:"Home/Egral/egral_yl/token/"+info,
						method:"get",
					   }).then(function(res){
						var yl=res.data.zhuan_dong;
						var Credits = parseFloat(drainage*yl).toFixed(2);
						_this.Credits = parseFloat(Credits).toFixed(2);
					}).catch(function(err){
						console.log(err)		
					})
				}
					
			},
			//上传图片
			onUpload(event){
				var _this = this;
				var info = window.localStorage.data;
				var formData = new FormData();
				formData.append('token', info);
				formData.append('path', "UserEgral");
				formData.append('img', event.target.files[0]);
				formData.append('height', 175);
				this.$axios({
					url:'One/Upload/uploadImg',
					method:'post',
					data:formData
				}).then(function(res){
					_this.fileImg =res.data.data;
				}).catch(function(){
					alert("返回错误")
				});
			},
			//引流送积分协议
			select(){
				var _this = this;
				_this.active = !_this.active;
			},
			//提交
			enter(){
				var _this = this; 
				var drainage = this.drainage;//引流金额
				var Credits = this.Credits;//到账冻积分数
				var fileImgs = this.fileImg;//凭证
				var active = this.active;//协议		
				if(drainage == "" || Credits == "" || fileImgs  == ""){
					alert("请将信息填写完整")
				}else if(active == false){
					alert("请同意协议在提交")
				}else{
					var info = window.localStorage.data;
					var params = new URLSearchParams();
					params.append('token', info);	
					params.append('img',fileImgs);
					params.append('price',drainage);
					params.append('egral',Credits);
					_this.$axios({
					   url:"Home/Egral/egral_yl",
						method:"post",
						data:params
					}).then(function(res){
						console.log(res.data)
					   	if(res.data >0){
					   		alert("提交成功")
					   		var id = res.data;
					   		window.location.href="http://www.zuqiuxi.top/Home/Alipay/pay_yl/token/"+info+"/id/"+id;
					   	}else{
					   		alert("提交失败，请重新提交")
					   	}
					}).catch(function(err){
						console.log(err)		
					})
				}
			},
//			积分引流协议
			agreement(){
				this.agreementshow = true;
			},
			quit(){
				this.agreementshow = false;
			}
		}
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	@import "../css/wdrainage.css";
	.activestrong{
		/*background: radial-gradient(#fff 30%,#F3961F 25%) !important;*/
		background:#F3961F !important;
	}
	.activeblock{
		display: block !important;
	}
</style>